<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年06月26日 22:24
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <el-tabs type="border-card" tab-position="left" v-model="activeName" class="manager-tab"  @tab-click="handleClick">
      <el-tab-pane label="个人中心" name="0">
        <span slot="label"><i class="el-icon-user-solid"></i> 个人中心</span>
        <el-form label-position="left" :model="userInfo" label-width="100px" :rules="rules" ref="userInfo">
          <el-form-item label="用户头像">
            <image-cropper :imageUrl="userInfo.avatar" :cropWidth="120" :cropHeight="120" @setImageUrl="setImageUrl"/>
          </el-form-item>
          <el-form-item label="登录名" prop="userCode">
            <el-input v-model="userInfo.userCode" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="userInfo.userName" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="userInfo.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker
              v-model="userInfo['birthday']"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="评论邮件通知">
            <el-radio-group v-model="userInfo.startEmailNotification">
              <el-radio
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userInfo.email" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="职业" prop="occupation">
            <el-input v-model="userInfo.occupation" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="summary">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 10}"
              placeholder="请输入内容"
              style="width: 100%"
              v-model="userInfo.summary">
            </el-input>
          </el-form-item>
          <div>
            <div class="third-bind-title"><span>第三方账号绑定</span></div>
            <el-table
                :data="thirdBindList"
                auto-resize
                resizeable
                border
                v-loading="dvLoading"
            >
              <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
              <el-table-column label="绑定帐号信息" align="center" prop="thirdSource" min-width="90" :show-overflow-tooltip="true"/>
              <el-table-column label="详情" align="center" prop="thirdUname" min-width="100" :show-overflow-tooltip="true"/>
              <el-table-column label="绑定时间" align="center" prop="createTime" min-width="160"/>
              <el-table-column label="状态" align="center" prop="status" min-width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1"><el-icon class="el-icon-success" style="color: green"/>使用中</span>
                  <span v-else><el-icon class="el-icon-error" style="color: red"/>已停用</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="60">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleUnBind(scope.row)">解绑</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="third-bind-title third-bind-content-title">
              <span>你还可以绑定以下第三方账号</span>
            </div>
            <div class="third-bind-content">
              <div @click="handleBindGitee" class="third-bind-item" v-if="thirdBindList.filter(item => item.thirdSource === 'GITEE').length === 0">
                <div style="font-size: 32px">
                  <svg-icon icon-class="gitee2" />
                </div>
                <div style="font-size: 14px">GITEE</div>
              </div>
              <div @click="handleBindQq" class="third-bind-item" v-if="thirdBindList.filter(item => item.thirdSource === 'QQ').length === 0">
                <div style="font-size: 32px">
                  <svg-icon icon-class="qq2" />
                </div>
                <div style="font-size: 14px">QQ</div>
              </div>
            </div>
          </div>
          <el-form-item>
            <div class="tab-pane-footer">
              <el-button type="primary" round @click="saveUserInfo">保 存</el-button>
              <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="我的足迹" name="10">
        <span slot="label"><i class="el-icon-star-on"></i> 我的足迹</span>
        <div style="width: 100%;overflow:auto" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item
                v-for="(article, index) in readHistoryList"
                :key="index"
                :timestamp="article['createTime']"
                placement="top"
                size="large"
            >
              <el-card>
                <div class="article-card-main">
                  <router-link :to="'/info/'+article.id">
                    <div class="article-content">
                      <div class="image-container">
                        <el-image :src="article['blogImage']" fit="cover" class="carousel-img"/>
                      </div>
                      <div class="article-title-remark">
                        <div class="article-title">
                          {{article['blogTitle']}}
                        </div>
                        <div class="article-remark">
                          {{article['blogRemark']}}
                        </div>
                      </div>
                    </div>
                  </router-link>
                  <div class="article-tag-all">
                    <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 转载
                    </el-tag>
                    <el-tag v-else type="success" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 原创
                    </el-tag>
                    <el-tag type="warning" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> {{article['typeName']}}
                    </el-tag>
                    <div>
                        <span @click="handleLikeOptions(index, 'dvLike', 'blogGoods', 'LIKE')" class="mark-item">
                          <svg-icon v-if="article['dvLike'] === 1" icon-class="like2" />
                          <svg-icon v-else icon-class="like" />
                        </span>
                      {{ article['blogGoods'] }} 点赞
                    </div>
                    <div>
                        <span @click="handleLikeOptions(index, 'dvDislike', 'blogNoGoods', 'DISLIKE')" class="mark-item">
                          <svg-icon v-if="article['dvDislike'] === 1" icon-class="dislike2" />
                          <svg-icon v-else icon-class="dislike" />
                        </span>
                      {{ article['blogNoGoods'] }} 点踩
                    </div>
                    <div>
                        <span @click="handleLikeOptions(index, 'dvCollection', 'blogCollection', 'COLLECTION')" class="mark-item">
                          <svg-icon v-if="article['dvCollection'] === 1" icon-class="star3" />
                          <svg-icon v-else icon-class="star2" />
                        </span>
                      {{ article['blogCollection'] }} 收藏
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-if="readHistoryList.length === 0" :image-size="200"></el-empty>
          <div class="tab-pane-footer">
            <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的文章" name="7">
        <span slot="label"><i class="el-icon-message-solid"></i>我的文章</span>
        <div style="width: 100%;overflow:auto;" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item
              v-for="(article, index) in articleList"
              :key="index"
              :timestamp="article['createTime']"
              placement="top"
              size="large"
            >
              <el-card>
                <div class="article-card-main">
                  <router-link :to="'/info/'+article.id">
                    <div class="article-content">
                      <div class="image-container">
                        <el-image :src="article['blogImage']" fit="cover" class="carousel-img"/>
                      </div>
                      <div class="article-title-remark">
                        <div class="article-title">
                          {{article['blogTitle']}}
                        </div>
                        <div class="article-remark">
                          {{article['blogRemark']}}
                        </div>
                      </div>
                    </div>
                  </router-link>
                  <div class="article-tag-all">
                    <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 转载
                    </el-tag>
                    <el-tag v-else type="success" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 原创
                    </el-tag>
                    <el-tag type="warning" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> {{article['typeName']}}
                    </el-tag>
                    <div>
                        <span @click="handleArticleOptions(index, 'dvLike', 'blogGoods', 'LIKE')" class="mark-item">
                          <svg-icon v-if="article['dvLike'] === 1" icon-class="like2" />
                          <svg-icon v-else icon-class="like" />
                        </span>
                      {{ article['blogGoods'] }} 点赞
                    </div>
                    <div>
                        <span @click="handleArticleOptions(index, 'dvDislike', 'blogNoGoods', 'DISLIKE')" class="mark-item">
                          <svg-icon v-if="article['dvDislike'] === 1" icon-class="dislike2" />
                          <svg-icon v-else icon-class="dislike" />
                        </span>
                      {{ article['blogNoGoods'] }} 点踩
                    </div>
                    <div>
                        <span @click="handleArticleOptions(index, 'dvCollection', 'blogCollection', 'COLLECTION')" class="mark-item">
                          <svg-icon v-if="article['dvCollection'] === 1" icon-class="star3" />
                          <svg-icon v-else icon-class="star2" />
                        </span>
                      {{ article['blogCollection'] }} 收藏
                    </div>
                  </div>
                  <div class="article-option-all">
                    <div>
                      <el-tooltip content="文章状态" placement="top">
                        <el-tag v-if="article['status'] === '1'" type="success" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 已发布
                        </el-tag>
                        <el-tag v-else type="info" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 草稿
                        </el-tag>
                      </el-tooltip>
                      <el-tooltip content="复核状态" placement="top">
                        <el-tag v-if="article['approvalStatus'] === '1'" type="success" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 复核通过
                        </el-tag>
                        <el-tag v-else-if="article['approvalStatus'] === '2'" type="warning" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 待复核
                        </el-tag>
                        <el-tag v-else-if="article['approvalStatus'] === '3'" type="primary" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 暂无
                        </el-tag>
                        <el-tag v-else type="danger" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 复核失败
                        </el-tag>
                      </el-tooltip>
                    </div>
                    <div>
                      <el-tooltip v-if="article['approvalStatus'] === '3'" content="提交复核" placement="top">
                        <el-button type="success" icon="el-icon-check" circle @click="handleSubmitApproval(article.id)"></el-button>
                      </el-tooltip>
                      <el-tooltip content="编辑" placement="top">
                        <el-button type="primary" icon="el-icon-edit" circle @click="handleUpdateArticle(article.id)"></el-button>
                      </el-tooltip>
                      <el-tooltip content="删除" placement="top">
                        <el-button type="danger" icon="el-icon-delete" circle @click="handleDeleteArticle(article.id)"></el-button>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-if="articleList.length === 0" :image-size="200"></el-empty>
          <div class="tab-pane-footer">
            <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的评论" name="1">
        <span slot="label"><i class="el-icon-message-solid"></i>我的评论</span>
        <div style="width: 100%;overflow:auto;" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item v-for="(comment, index) in commentList" :key="index" :timestamp="timeAgo(comment['createTime'])" placement="top">
              <el-card>
                <div class="commentList">
                  <div class="left p1">
                    <div>
                      <img v-if="comment.user" :src="comment.user.avatar ? comment.user.avatar:defaultAvatar" onerror="onerror=null;src=defaultAvatar"  alt=""/>
                      <img v-else :src="defaultAvatar"  alt=""/>
                    </div>
                    <div class="rightTop">
                      <el-link class="userName" :underline="false">{{comment.user.userName}}</el-link>
                      <router-link :to="'/info/'+comment.toBlogId">
                        <el-tag style="cursor: pointer;">{{comment['blogTitle']}}</el-tag>
                      </router-link>
                    </div>
                  </div>
                  <div class="right p1">
                    <div class="rightCenter ck-content" id="commentContent" v-highlight v-html="markdownToHtml(comment.content)"></div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
            <el-empty v-if="commentList.length === 0" :image-size="200"></el-empty>
          </el-timeline>
          <div class="tab-pane-footer">
            <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的回复" name="2">
        <span slot="label">
          <el-badge  :value="userReceiveCommentCount"  class="item" :hidden="userReceiveCommentCount == 0">
            <i class="el-icon-s-promotion"></i> 我的回复
          </el-badge>
        </span>
        <div style="width: 100%;overflow:auto" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item v-for="(reply, index) in replyList" :key="index" :timestamp="timeAgo(reply['createTime'])" placement="top">
              <el-card>
                <div class="commentList">
                  <div class="left p1">
                    <div>
                      <img v-if="reply.user" :src="reply.user.avatar ? reply.user.avatar: defaultAvatar" onerror="onerror=null;src=defaultAvatar"  alt=""/>
                      <img v-else :src="defaultAvatar"  alt=""/>
                    </div>
                    <div>
                      <div class="rightTop">
                        <el-link class="userName" :underline="false">{{reply.user.userName}}</el-link>
                        <router-link :to="'/info/'+reply.toBlogId">
                          <el-tag style="cursor: pointer;">{{reply['blogTitle']}}</el-tag>
                        </router-link>
                      </div>
                    </div>
                  </div>
                  <div class="right p1">
                    <div class="rightCenter ck-content" id="commentContent" v-highlight v-html="markdownToHtml(reply.content)"></div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-if="replyList.length === 0" :image-size="200"></el-empty>
          <div class="tab-pane-footer">
            <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的点赞" name="3">
        <span slot="label"><i class="el-icon-star-on"></i> 我的点赞</span>
        <div style="width: 100%;overflow:auto" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item
              v-for="(article, index) in praiseList"
              :key="index"
              :timestamp="article['createTime']"
              placement="top"
              size="large"
            >
              <el-card>
                <div class="article-card-main">
                  <router-link :to="'/info/'+article.id">
                    <div class="article-content">
                      <div class="image-container">
                        <el-image :src="article['blogImage']" fit="cover" class="carousel-img"/>
                      </div>
                      <div class="article-title-remark">
                        <div class="article-title">
                          {{article['blogTitle']}}
                        </div>
                        <div class="article-remark">
                          {{article['blogRemark']}}
                        </div>
                      </div>
                    </div>
                  </router-link>
                  <div class="article-tag-all">
                    <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 转载
                    </el-tag>
                    <el-tag v-else type="success" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 原创
                    </el-tag>
                    <el-tag type="warning" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> {{article['typeName']}}
                    </el-tag>
                    <div>
                        <span @click="handleLikeOptions(index, 'dvLike', 'blogGoods', 'LIKE')" class="mark-item">
                          <svg-icon v-if="article['dvLike'] === 1" icon-class="like2" />
                          <svg-icon v-else icon-class="like" />
                        </span>
                      {{ article['blogGoods'] }} 点赞
                    </div>
                    <div>
                        <span @click="handleLikeOptions(index, 'dvDislike', 'blogNoGoods', 'DISLIKE')" class="mark-item">
                          <svg-icon v-if="article['dvDislike'] === 1" icon-class="dislike2" />
                          <svg-icon v-else icon-class="dislike" />
                        </span>
                      {{ article['blogNoGoods'] }} 点踩
                    </div>
                    <div>
                        <span @click="handleLikeOptions(index, 'dvCollection', 'blogCollection', 'COLLECTION')" class="mark-item">
                          <svg-icon v-if="article['dvCollection'] === 1" icon-class="star3" />
                          <svg-icon v-else icon-class="star2" />
                        </span>
                      {{ article['blogCollection'] }} 收藏
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-if="praiseList.length === 0" :image-size="200"></el-empty>
          <div class="tab-pane-footer">
            <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的收藏" name="9">
        <span slot="label"><i class="el-icon-star-on"></i> 我的收藏</span>
        <div style="width: 100%;overflow:auto" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item
              v-for="(article, index) in collectionList"
              :key="index"
              :timestamp="article['createTime']"
              placement="top"
              size="large"
            >
              <el-card>
                <div class="article-card-main">
                  <router-link :to="'/info/'+article.id">
                    <div class="article-content">
                      <div class="image-container">
                        <el-image :src="article['blogImage']" fit="cover" class="carousel-img"/>
                      </div>
                      <div class="article-title-remark">
                        <div class="article-title">
                          {{article['blogTitle']}}
                        </div>
                        <div class="article-remark">
                          {{article['blogRemark']}}
                        </div>
                      </div>
                    </div>
                  </router-link>
                  <div class="article-tag-all">
                    <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 转载
                    </el-tag>
                    <el-tag v-else type="success" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> 原创
                    </el-tag>
                    <el-tag type="warning" size="medium" class="article-tag">
                      <el-icon class="el-icon-set-up" /> {{article['typeName']}}
                    </el-tag>
                    <div>
                        <span @click="handleCollectionOptions(index, 'dvLike', 'blogGoods', 'LIKE')" class="mark-item">
                          <svg-icon v-if="article['dvLike'] === 1" icon-class="like2" />
                          <svg-icon v-else icon-class="like" />
                        </span>
                      {{ article['blogGoods'] }} 点赞
                    </div>
                    <div>
                        <span @click="handleCollectionOptions(index, 'dvDislike', 'blogNoGoods', 'DISLIKE')" class="mark-item">
                          <svg-icon v-if="article['dvDislike'] === 1" icon-class="dislike2" />
                          <svg-icon v-else icon-class="dislike" />
                        </span>
                      {{ article['blogNoGoods'] }} 点踩
                    </div>
                    <div>
                        <span @click="handleCollectionOptions(index, 'dvCollection', 'blogCollection', 'COLLECTION')" class="mark-item">
                          <svg-icon v-if="article['dvCollection'] === 1" icon-class="star3" />
                          <svg-icon v-else icon-class="star2" />
                        </span>
                      {{ article['blogCollection'] }} 收藏
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty v-if="collectionList.length === 0" :image-size="200"></el-empty>
          <div class="tab-pane-footer">
            <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的反馈" name="4">
        <span slot="label"><i class="el-icon-phone"></i> 我的反馈</span>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="反馈须知" name="1">
            <div>如果您对本站有什么想法，可以在这里进行反馈</div>
            <div>或者加入我们的QQ群进行交流</div>
          </el-collapse-item>
        </el-collapse>
        <el-divider></el-divider>
        <el-form label-position="left" :model="userInfo" label-width="80px">
          <el-form-item label="反馈标题">
            <el-input v-model="feedback.title" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="反馈内容">
            <editor-comment v-model="feedback.content" :min-height="192"/>
          </el-form-item>
          <el-form-item>
            <div class="tab-pane-footer">
              <el-button type="primary" round @click="submitFedBack">提 交</el-button>
              <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <div style="width:100%;overflow:auto" v-loading="dvLoading">
          <el-timeline>
            <el-timeline-item v-for="(feedbackItem, index) in feedbackList" :key="index" :timestamp="timeAgo(feedbackItem['createTime'])" placement="top">
              <el-card>
                <div class="feedback-card">
                  <div class="item">
                    <div class="title">
                      标 题:
                    </div>
                    <div class="content">
                      {{feedbackItem.title}}
                    </div>
                  </div>
                  <div class="item">
                    <div class="title">
                      内 容:
                    </div>
                    <div class="content edit-content" v-html="feedbackItem.content">
                    </div>
                  </div>
                  <div class="item">
                    <div class="title">
                      状 态:
                    </div>
                    <div class="content">
                      <el-tag v-for="(item, index) in dict.type.sys_feedback_status" :key="index" :type="item.listClass" v-if="feedbackItem.status == item.dictValue">{{item.dictLabel}}</el-tag>
                    </div>
                  </div>
                  <div class="item">
                    <div class="title">
                      回 复:
                    </div>
                    <div class="content edit-content" v-html="feedbackItem.reply">
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
            <el-empty v-if="feedbackList.length === 0" :image-size="200"></el-empty>
          </el-timeline>
        </div>
      </el-tab-pane>
      <el-tab-pane label="申请友链" name="5">
        <span slot="label"><i class="el-icon-share"></i> 申请友链</span>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="友链申请需知" name="1">
            <template slot="title">
              <h3>友链申请需知<i class="header-icon el-icon-info"></i></h3>
            </template>
            <div class="friend-link-apply-notice">
              <span>请确定贵站可以稳定运营</span><br/>
              <span>申请前请先添加下方青桔柠檬友链</span><br/>
              <span>欢迎各位小伙伴一起互换友链</span><br/>
            </div>
            <el-descriptions title="本站信息" :column="1" :border="true">
              <el-descriptions-item label="网站名称">青桔柠檬</el-descriptions-item>
              <el-descriptions-item label="网站LOGO">
                <el-image
                    style="width: 100px; height: 100px"
                    src="http://www.huangpeng.net:9000/lemon-blog-cloud//system/user-cover/20250225170746A010-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250225164236.png"
                    fit="cover">
                </el-image>
              </el-descriptions-item>
              <el-descriptions-item label="网站简介">一个基于微服务架构的前后端分离博客平台</el-descriptions-item>
              <el-descriptions-item label="网站地址">http://www.huangpeng.net/about</el-descriptions-item>
              <el-descriptions-item label="联系邮箱">83020349@qq.com</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
        <el-divider></el-divider>
        <el-form label-position="left" :model="blogLink" label-width="100px" ref="blogLink" :rules="linkRules">
          <el-form-item label="网站图标">
            <image-cropper :imageUrl="blogLink.linkIconUrl" :cropWidth="120" :cropHeight="120" @setImageUrl="setLinkImageUrl"/>
          </el-form-item>
          <el-form-item label="网站名称" prop="linkName">
            <el-input v-model="blogLink.linkName" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="网站地址" prop="linkUrl">
            <el-input v-model="blogLink.linkUrl" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="网站简介" prop="remark">
            <el-input v-model="blogLink.remark" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="站长邮箱" prop="email">
            <el-input v-model="blogLink.email" placeholder="用于申请通过邮件通知" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="tab-pane-footer">
              <el-button type="primary" round @click="submitForm('replyBlogLink')">申 请</el-button>
              <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="6">
        <span slot="label"><i class="el-icon-s-tools"></i> 修改密码</span>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="修改密码须知" name="1">
            <div>此修改密码功能仅适用于账号和密码登录</div>
            <div>对于第三方登录的账号，无法进行密码修改</div>
          </el-collapse-item>
        </el-collapse>
        <div class="password-form">
          <el-form ref="passwordForm" label-position="left" :model="restPasswordForm" label-width="100px" :rules="passwordRules">
            <el-form-item prop="code" label="邮件验证码">
              <el-row type="flex" align="middle" justify="space-between">
                <el-input
                    v-model="restPasswordForm.code"
                    auto-complete="off"
                    placeholder="验证码"
                    @keyup.enter.native="restPassword"
                    clearable
                >
                  <i slot="prefix" class="el-input__icon el-icon-set-up"/>
                </el-input>
                <div class="login-code">
                  <el-button style="width:100%;" plain type="danger" @click="handleSendCaptcha" :disabled="isCounting || dvDisableRegCodeButton">
                    {{ isCounting === false ? '发送验证码' : countdown + '秒后可重发' }}
                  </el-button>
                </div>
              </el-row>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" show-password v-model="restPasswordForm.newPassword" style="width: 100%" clearable></el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="newPasswordAgain">
              <el-input type="password" show-password v-model="restPasswordForm.newPasswordAgain" style="width: 100%" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <div class="tab-pane-footer">
                <el-button type="primary" round @click="restPassword">提 交</el-button>
                <el-button plain round @click="hiddenManagerDrawer">取 消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 博客信息弹框 -->
    <article-info-dialog @hiddenArticleInfoDialog="hiddenArticleInfoDialog" :articleId="articleId" v-if="dvShowArticleInfoDialog" />
  </div>
</template>
<script lang="ts">
import {Component, Watch} from "vue-property-decorator";
import store from "@/store";
import { timeAgo } from "@/utils/DateUtil";
import baseMixin from "@/mixin/baseMixin";
import {checkUserCode, resetPassword, updateBaseUser} from "@/api/blog/baseUser";
import {Form, MessageBox} from "element-ui";
import { delBlog, listBlog, submitApproval } from "@/api/blog/article";
import { getUserId } from "@/utils/auth";
import { insertOrUpdateBlogOptions } from "@/api/blog/blogOptions";
import ArticleInfoDialog from "@/views/article/dialog/index.vue";
import { listMyComment } from "@/api/blog/comment";
import { markdownToHtml } from "@/utils/WordUtil";
import Prismjs from "prismjs";
import { addFeedback, listFeedback } from "@/api/blog/feedback";
import { sendRestPasswordCaptcha } from "@/api/message/email";
import {deleteThirdBind, giteeBindRender, listThirdBind, qqBindRender} from "@/api/auth/login";
import cache from "@/plugins/cache";
import {addFriendLink} from "@/api/blog/link";

@Component({
  methods: { markdownToHtml },
  components: { ArticleInfoDialog }
})
export default class index extends baseMixin {

  /** 字典信息 */
  public dicts: any = ['sys_yes_no', 'sys_normal_disable', 'sys_feedback_status'];

  /** 用户信息 */
  get userInfo() {
    return store.getters.userInfo;
  }

  /** 修改密码表单 */
  public restPasswordForm: any = {
    newPassword: '',
    newPasswordAgain: '',
    uuid: '',
    type: '2',
    code: ''
  };

  /** 当前tab */
  public activeName: string = '0';

  private userReceiveCommentCount: number = 0;

  /** 反馈提交 */
  private feedback: any = {
    title: '',
    content: ''
  };

  /** 友链申请 */
  public blogLink: any = {};

  /** 我的足迹 */
  public readHistoryList: any = [];

  /** 我的评论 */
  private commentList: any = [];

  /** 我的回复 */
  private replyList: any =  [];

  /** 我的点赞 */
  private praiseList: any = [];

  /** 我的收藏 */
  private collectionList: any = [];

  /** 我的反馈 */
  private feedbackList: any = [];

  /** 激活的折叠面板 */
  private activeNames: any = ['1'];

  /** 友链申请须知描述 */
  public linkNotice: object = {};

  /** 默认头像 */
  private defaultAvatar:string = 'http://119.91.211.73:9000/lemon-blog-cloud//system/default/20230405202155A002.jpg';

  /** 密码正则表达式 */
  private passwordReg: any = /^(([a-zA-Z]+[0-9]+)|([0-9]+[a-zA-Z]+)|([a-z]+[@#%*$_^&])|([0-9]+[@#%*$_^&]))([a-zA-Z0-9@#%*$_^&]*)$/;

  /** 文章列表 */
  private articleList: any = [];

  /** 标签颜色 */
  private tagType: any = ['success', 'warning', 'danger', 'info'];

  /** 控制创作弹框显示 */
  public dvShowArticleInfoDialog: boolean = false;

  /** 文章id */
  public articleId: string = '';

  /** 邮件验证码发送倒计时的初始时间 */
  public countdown: any = 60;

  /** 邮件验证码发送的计时器 */
  public timer: any = null;

  /** 是否正在倒计时 */
  public isCounting: any = false;

  /** 是否加载中 */
  public dvLoading: any = false;

  /** 绑定的第三方账号列表 */
  public thirdBindList: any = [];

  /** 是否禁用注册发送验证码邮件按钮 */
  get dvDisableRegCodeButton() {
    return [null, undefined, ''].includes(this.userInfo.email);
  }

  /** 登录名正则表达式 */
  private userCodeReg: any = /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,20}$/;

  /** 个人信息校验规则 */
  public rules: any = {
    userCode: [
      { required: true, trigger: 'blur', validator: this.validateUserCode }
    ],
    email: [
      { pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱' },
    ],
    summary: [
      { min: 0, max: 200, message: '长度在0到200个字符' },
    ],
    userName: [
      { required: true, trigger: 'blur', message: '请输入用户名'}
    ]
  };

  /** 友链校验规则 */
  public linkRules: any = {
    linkName: [
      { required: true, message: '网站名称不能为空', trigger: 'blur' },
      { min: 1, max: 10, message: '长度在1到10个字符' },
    ],
    linkUrl: [
      { required: true, message: '网站地址不能为空', trigger: 'blur' },
      { pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入有效的URL' },
    ],
    remark: [
      { required: true, message: '简介不能为空', trigger: 'blur' },
      { min: 1, max: 50, message: '长度在1到50个字符' },
    ],
    email: [
      { pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱' },
    ],
  };

  /** 用户密码校验规则 */
  public passwordRules: any = {
    newPassword: [
      { required: true, trigger: 'blur', validator: this.validateNewPassword},
      { min: 5, max: 20, message: '密码长度在5到20个字符' }
    ],
    newPasswordAgain: [
      { required: true, trigger: 'blur', validator: this.validateNewPasswordAgain},
      { min: 5, max: 20, message: '密码长度在5到20个字符' }
    ]
  };

  /** xss白名单配置 */
  private options: any = {
    whiteList: {
      a: ['href', 'title', 'target'],
      span: ['class'],
      h1: ['class'],
      h2: ['class'],
      h3: ['class'],
      h4: ['class'],
      pre: [],
      code: ['class'],
      p: ['class']
    }
  };

  private async created() {
    this.queryArticleList();
    this.queryReadHistoryList();
    this.queryPraiseList();
    this.queryCollectionList();
    this.queryMyCommentList();
    this.queryMyReplyList();
    this.queryFeedBackList();
    this.queryThirdBindList();
  }

  private mounted() {
    this.$nextTick(() => {
      Prismjs.highlightAll();
      this.addExpand();
    })
  }

  private beforeMount() {
    window.addEventListener('storage', this.handleLocalStorageChange);
  }

  private beforeDestroy() {
    window.removeEventListener('storage', this.handleLocalStorageChange);
  }

  /** 获取文章列表 */
  private queryArticleList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      userId: getUserId()
    }
    this.dvLoading = true;
    listBlog(param).then((res: any) => {
      this.articleList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 获取我的足迹列表 */
  private queryReadHistoryList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      dvRead: 1
    }
    this.dvLoading = true;
    listBlog(param).then((res: any) => {
      this.readHistoryList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 获取我的点赞列表 */
  private queryPraiseList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      dvLike: 1
    }
    this.dvLoading = true;
    listBlog(param).then((res: any) => {
      this.praiseList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 获取我的收藏列表 */
  private queryCollectionList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      dvCollection: 1
    }
    this.dvLoading = true;
    listBlog(param).then((res: any) => {
      this.collectionList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 查询我的评论列表  */
  private queryMyCommentList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      userId: getUserId()
    }
    this.dvLoading = true;
    listMyComment(param).then((res: any) => {
      this.commentList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 查询我的回复列表 */
  private queryMyReplyList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      toUserId: getUserId()
    }
    this.dvLoading = true;
    listMyComment(param).then((res: any) => {
      this.replyList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 查询我的反馈列表 */
  private queryFeedBackList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      userId: getUserId()
    }
    this.dvLoading = true;
    listFeedback(param).then((res: any) => {
      this.feedbackList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 查询用户绑定的第三方账号列表 */
  private queryThirdBindList() {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
      userId: getUserId()
    }
    this.dvLoading = true;
    listThirdBind(param).then((res: any) => {
      this.thirdBindList = res.rows;
      this.dvLoading = false;
    })
  }

  /** 点击当前tab */
  public handleClick(val: any) {
    if (val.name === '1') {
      this.queryMyCommentList();
    }
    if (val.name === '2') {
      this.queryMyReplyList();
      // 判断用户是否未读的回复
      if (this.userReceiveCommentCount > 0) {
        // 设置已阅读
        /*  readUserReceiveCommentCount().then(response => {
          if(response.code == this.$ECode.SUCCESS) {
            // 阅读成功
            this.userReceiveCommentCount = 0
          }
        })*/
      }
    }
    if (val.name === '3') {
      this.queryPraiseList();
    }
    if (val.name === '4') {
      this.queryFeedBackList();
    }
    if (val.name === '6') {
      this.restPasswordForm.newPasswordAgain = '';
      this.restPasswordForm.newPassword = '';
      this.restPasswordForm.uuid = '';
      this.restPasswordForm.code = '';
    }
    if (val.name === '7') {
      this.queryArticleList();
    }
    if (val.name === '9') {
      this.queryCollectionList();
    }
    if (val.name === '10') {
      this.queryReadHistoryList();
    }
  }

  /** 保存个人信息 */
  private saveUserInfo() {
    const form: any = this.$refs['userInfo'];
    form.validate((valid: any) => {
      if (valid) {
        updateBaseUser(this.userInfo).then((res: any) => {
          this.$modal.msgSuccess(res.msg);
          // 更新vuex数据
          for (const property in this.$store.state.userInfo) {
            let arr = property.split('');
            let result = arr.map((item) => {
              if (item.toUpperCase() === item) {
                return '_' + item.toUpperCase();
              } else {
                return item;
              }
            }).join('');
          }
        })
      }
    })
  }

  /** 修改密码 */
  public restPassword() {
    const form: any = this.$refs['passwordForm'];
    form.validate((valid: any) => {
      if (valid) {
        const data = {
          newPassword: this.restPasswordForm.newPassword,
          email: this.userInfo.email,
          uuid: this.restPasswordForm.uuid,
          type: '2',
          code: this.restPasswordForm.code
        };
        resetPassword(data).then((res: any) => {
          this.$modal.msgSuccess(res.msg);
        })
      }
    })
  }

  /** 我的文章-点赞 */
  public handleArticleOptions(index: any, property: string, countProperty: any, type: string) {
    const data = {
      businessType: type,
      blogId: this.articleList[index].id
    }
    insertOrUpdateBlogOptions(data).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.articleList[index][property] = res.data.value;
      this.articleList[index][countProperty] = this.articleList[index][countProperty] + (res.data.value === 1 ? res.data.value : -1);
    })
  }

  /** 我的点赞-点赞 */
  public handleLikeOptions(index: any, property: string, countProperty: any, type: string) {
    const data = {
      businessType: type,
      blogId: this.praiseList[index].id
    }
    insertOrUpdateBlogOptions(data).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.praiseList[index][property] = res.data.value;
      this.praiseList[index][countProperty] = this.praiseList[index][countProperty] + (res.data.value === 1 ? res.data.value : -1);
    })
  }

  /** 我的收藏-点赞 */
  public handleCollectionOptions(index: any, property: string, countProperty: any, type: string) {
    const data = {
      businessType: type,
      blogId: this.collectionList[index].id
    }
    insertOrUpdateBlogOptions(data).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.collectionList[index][property] = res.data.value;
      this.collectionList[index][countProperty] = this.collectionList[index][countProperty] + (res.data.value === 1 ? res.data.value : -1);
    })
  }

  /** 回写头像图片地址 */
  public setImageUrl(url: any) {
    this.userInfo.avatar = url
  }

  /** 回写友情链接网站LOGO地址 */
  public setLinkImageUrl(url: any) {
    this.blogLink.linkIconUrl = url;
  }

  /** 用户登录名称校验 */
  public validateUserCode(rule: any, value: any, callback: any) {
    if ([null,undefined,''].includes(value)) {
      callback(new Error('登录名不能为空'));
    } else {
      if (!this.userCodeReg.test(value)) {
        callback(new Error('登录名格式错误，登录名只能包含中文、字母、数字和下划线！'));
      } else {
        checkUserCode(this.userInfo.id, value).then((res: any) => {
          if (res.data) {
            callback(new Error('登录名已存在！'));
          } else {
            callback();
          }
        })
      }
    }
  }

  /** 新密码校验 */
  private validateNewPassword(rule: any, value: any, callback: any) {
    if ([null,undefined,''].includes(value)) {
      callback(new Error('密码不能为空'));
    } else {
      if (!this.passwordReg.test(value)) {
        callback(new Error('密码格式错误！'));
      } else if (this.restPasswordForm.newPasswordAgain !== '') {
        (this.$refs['passwordForm'] as Form).validateField('newPasswordAgain');
        callback();
      } else {
        callback();
      }
    }
  };

  /** 新密码的二次校验 */
  private validateNewPasswordAgain(rule: any, value: any, callback: any) {
    if ([null,undefined,''].includes(value)) {
      callback(new Error('请再次输入密码'));
    } else {
      if (!this.passwordReg.test(value)) {
        callback(new Error('密码格式错误！'));
      } else if (value !== this.restPasswordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
  };

  /** 编辑文章 */
  private handleUpdateArticle(articleId: string) {
    this.articleId = articleId;
    this.openArticleDialog();
  }

  /** 提交复核 */
  private handleSubmitApproval(articleId: string) {
    submitApproval(articleId).then((res: any) => {
      this.$modal.msgSuccess(res.msg)
      this.queryArticleList();
    })
  }

  /** 删除按钮操作 */
  private handleDeleteArticle(articleId: string) {
    this.$modal.confirm('是否确认删除博客管理编号为"' + articleId + '"的数据项？').then(function() {
      return delBlog(articleId);
    }).then(() => {
      this.queryArticleList();
      this.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }

  /** 打开创作弹框 */
  private openArticleDialog() {
    this.dvShowArticleInfoDialog = true;
  }

  /** 关闭弹框 */
  public hiddenArticleInfoDialog() {
    this.dvShowArticleInfoDialog = false;
    this.$forceUpdate();
  }

  /** 提交 */
  public submitForm(type: string) {
    const form: any = this.$refs['blogLink'];
    form.validate((valid: any) => {
      if (valid) {
        addFriendLink(this.blogLink).then((res :any) => {
          this.$message.success('友情链接申请成功，将会以邮件通知申请结果！');
        })
      }
    })
  };

  /** 提交反馈 */
  private submitFedBack() {
    const data = {
      title: this.feedback.title,
      content: this.feedback.content
    }
    addFeedback(data).then((res: any) => {
      this.$modal.msgSuccess(res.msg);
      this.feedback.title = '';
      this.feedback.content = '';
      this.queryFeedBackList();
    })
  }

  /**
   * dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
   * @param dateTimeStamp
   * @returns {string}
   */
  private timeAgo(dateTimeStamp: any) {
    return timeAgo(dateTimeStamp)
  };

  /** 跳转到文章详情 */
  private goToInfo(id: string) {
    let routeData = this.$router.resolve({
      path: "/info",
      query: {blogUid: id}
    });
    window.open(routeData.href, '_blank');
  };

  /** 跳转到资源详情 */
  private goSource(comment: any) {
    let source = comment.source
    switch(source) {
    case "MESSAGE_BOARD": {
        let routeData = this.$router.resolve({
          path: "/messageBoard"
        });
        window.open(routeData.href, '_blank');
      };break;
    case "BLOG_INFO": {
        let routeData = this.$router.resolve({
          path: "/info",
          query: {blogUid: comment.blogId}
        });
        window.open(routeData.href, '_blank');
      };break;
    case "ABOUT": {
        let routeData = this.$router.resolve({
          path: "/about"
        });
        window.open(routeData.href, '_blank');
      };break;
    }
  };

  /** 关闭抽屉 */
  public hiddenManagerDrawer() {
    this.$emit('hiddenManagerDrawer');
  }

  public async addExpand() {
    const imgs: any = document.querySelectorAll("#commentContent img");
    if (imgs != null) {
      for(let i = 0; i<imgs.length; i++){
        imgs[i]['onclick'] = this.expandPhoto;
        imgs[i]['onkeydown'] = this.expandPhoto;
      }
    }
  }

  /** 绑定图片点击缩放事件 */
  private expandPhoto(item: any){
    const overlay = document.createElement("div");
    overlay.setAttribute("id","overlay");
    overlay.setAttribute("class","overlay");
    document.body.appendChild(overlay);
    const img = document.createElement("img");
    img.setAttribute("id","expand")
    img.setAttribute("class","overlay-img");
    img.src = item.srcElement.currentSrc;
    const el = document.getElementById("overlay");
    const divImg = document.createElement("div");
    const spanDesc = document.createElement("span");
    spanDesc.setAttribute('class', 'overlay-img-desc');
    spanDesc.innerHTML = '点击图片返回';
    if (el != null) {
      el.appendChild(img);
      el.appendChild(spanDesc);
    }
    img.onclick = this.restore;
  }

  /** 移除缩放标签 */
  private restore(){
    const el1 = document.getElementById('overlay');
    const el2 = document.getElementById('expand');
    if (el1 != null  && document.body.contains(el1)) {
      document.body.removeChild(el1);
    }
    if (el2 != null && document.body.contains(el2)) {
      document.body.removeChild(el2);
    }
  }

  /** 点击邮件发送邮件验证码，开启倒计时*/
  public handleSendCaptcha() {
    if (['', undefined, null].includes(this.userInfo.email)) {
      this.$modal.msgSuccess('当前用户邮箱为空，请联系系统管理员');
      return
    }
    sendRestPasswordCaptcha(this.userInfo.email).then((res: any) => {
      this.restPasswordForm['uuid'] = res.uuid;
      this.$modal.msgSuccess("邮件发送成功");
      this.startCaptchaSendCounting();
    })
  }

  /** 启用验证码倒计时 */
  private startCaptchaSendCounting() {
    if (this.isCounting) {
      clearInterval(this.timer); // 停止计时器
      this.isCounting = false; // 停止倒计时
    } else {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--; // 每秒减少1
        } else {
          clearInterval(this.timer); // 倒计时结束，停止计时器
          this.isCounting = false; // 停止倒计时
          this.countdown = 60;
        }
      }, 1000); // 每秒执行一次
      this.isCounting = true; // 开始倒计时
    }
  }

  /** 处理绑定gitee */
  public handleBindGitee() {
    giteeBindRender().then(res => {
      cache.local.set("thirdBindStatus", 'false');
      window.addEventListener('storage', this.handleLocalStorageChange);
      window.open(
         res.data,
        '绑定Gitee账号',
        'height=auto,width=auto,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
      )
    })
  }

  /** 处理绑定Qq */
  public handleBindQq() {
    qqBindRender().then(res => {
      cache.local.set("thirdBindStatus", 'false');
      window.addEventListener('storage', this.handleLocalStorageChange);
      window.open(
          res.data,
          '绑定QQ账号',
          'height=auto,width=auto,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
      )
    })
  }

  /** 监听localstorage */
  private handleLocalStorageChange(event: any) {
    if (event.key === 'thirdBindStatus') {
      if (event.newValue === 'true') {
        this.$message.success("第三方账号绑定成功！");
        this.queryThirdBindList();
      }
    }
  }

  /** 解绑账号 */
  private handleUnBind(row: any) {
    MessageBox.confirm('确定解绑当前三方系统账户吗，操作将无法撤回', '系统提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deleteThirdBind(row).then(res => {
        this.$message.success('第三方账号解绑成功！');
        this.queryThirdBindList();
      })
    })
  }
}
</script>
<style scoped lang="scss">
.el-tag {
  height: 25px;
  line-height: 25px;
  margin-left: 6px;
}

.article-card-main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  cursor: pointer;
  .article-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    .image-container {
      width: 32%;
      border-radius: 5px;
      overflow: hidden;
      .carousel-img {
        width: 100%;
        max-height: 140px;
        object-fit: cover; /* 使图片保持高宽比并填充整个容器 */
        transition: all 0.6s;
        border-radius: 5px;
      }
      .carousel-img:hover {
        transform: scale(1.2) ;
      }
    }
    .article-title-remark {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 5px;
      width: 68%;
      .article-title {
        font-size: 18px;
        font-weight: 600;
        color: rgb(95, 95, 95);
      }
      .article-remark {
        overflow: hidden;
        overflow-wrap: anywhere;
        text-align: left;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*数字 4 代表为超出四行显示省略号*/
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .article-tag-all {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    ::v-deep .el-tag {
      margin-left: unset !important;
    }
  }
  .article-option-all {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    ::v-deep .el-tag {
      margin-left: unset !important;
      margin-right: 10px;
    }
    ::v-deep .el-button--medium.is-circle {
      padding: 7px !important;
    }
  }
  ::v-deep .el-card__body {
    width: 100%;
  }
}

::v-deep .el-timeline {
  padding: 3px !important;
}

@media only screen and (min-width: 850px){
  .tab-pane-footer {
    right: 250px;
  }
}

@media only screen and (min-width: 555px) and (max-width: 850px) {
  .tab-pane-footer {
    right: 175px;
  }
}

@media only screen and (min-width: 0px) and (max-width: 555px) {
  .tab-pane-footer {
    right: 20px;
  }
  .manager-tab {
    ::v-deep .el-tabs__content {
      margin-right: 0 !important;
    }
  }
  ::v-deep .el-tabs__item {
    padding: 0 10px !important;
  }
  ::v-deep .el-tabs--left .el-tabs__header.is-left {
    margin-right: 0 !important;
  }
  ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 168px !important;
  }
}

.password-form {
  padding-top: 15px;
  .login-code {
    height: 38px;
    float: right;
    margin-left: 10px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin: 0 0 0 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.imgBody {
  width: 100px;
  height: 100px;
  border: solid 2px #ffffff;
  float: left;
  position: relative;
}
.imgBody img {
  width: 100px;
  height: 100px;
}
.uploadImgBody {
  margin-left: 5px;
  width: 100px;
  height: 100px;
  border: dashed 1px #c0c0c0;
  float: left;
  position: relative;
}
.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}
.inputClass {
  position: absolute;
}

.commentList {
  width: 100%;
  margin: 0 auto;
}
.commentList .p1 {
  float: left;
}
.commentList .left {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.commentList .right {
  display: inline-block;
  width: 85%;
  margin-left: 5px;
  ::v-deep img {
    max-height: 100px;
    max-width: 100px;
    cursor: pointer;
  }
}
.commentList .rightTop {
  height: 30px;
}
.commentList .rightTop .userName {
  color: #303133;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.commentList .rightTop .timeAgo {
  color: #909399;
  margin-left: 10px;
  font-size: 15px;
}
.commentList .rightCenter {
  margin-left: 20px;
  min-height: 60px;
}
.overlay-img{
  position: relative;
  max-width:80%; //宽度
  max-height: 80%;
}
.overlay-img-desc {
  line-height: 50px;
  color: #FFFFFF;
  font-size: 20px;
}
.feedback-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  justify-items: center;
  flex-wrap: wrap;
  gap: 20px;
  .item {
    display: flex;
    flex-direction: row;
    justify-content: start;
    justify-items: center;
    flex-wrap: wrap;
    .title {
      width: 60px;
      font-size: 16px;
      font-weight: bold;
    }
    .content {
      width: calc(100% - 60px);
    }
    .edit-content {
      padding: 15px;
      background-color: #F5F7FA;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
    }
  }
}

.manager-tab {
  height: 100vh;
  ::v-deep .el-tabs__content {
    height: calc(100% - 70px);
    overflow: auto;
    margin-right: 10px;
    border-bottom: 1px solid #dfe4ed;
  }
  .tab-pane-footer {
    position: fixed;
    bottom: 20px;
  }
  .third-bind-title {
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .third-bind-content-title {
    margin-top: 20px;
  }
  .third-bind-content {
    display: flex;
    flex-direction: row;
    justify-content: start;
    .third-bind-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 20px;
      cursor: pointer;
    }
  }
  .friend-link-apply-notice {
    font-size: 15px;
    line-height: 30px;
    padding-bottom: 20px;
  }
}
</style>
